export default function topBoth(){
    var canvas_topBoth = document.getElementById('heter-topBoth');
    var topBoth_w = canvas_topBoth.clientWidth;
    var topBoth_h = canvas_topBoth.clientHeight;
    var ctx_topBoth = canvas_topBoth.getContext('2d');
    canvas_topBoth.width = topBoth_w;
    canvas_topBoth.height = topBoth_h;
    ctx_topBoth.width = topBoth_w;
    ctx_topBoth.height = topBoth_h;
    ctx_topBoth.fillStyle = 'rgba(0,0,0,0)';
    ctx_topBoth.fillRect(0, 0, topBoth_w, topBoth_h);
    var topBoth_px = 40, topBoth_py = 0, topBoth_dx = 1, topBoth_dy = 0;
    var steep_x = 4, steep_y = 4;
    var turning_x = topBoth_w - 40, turning_y = 40;
    function draw_topBoth() {
        ctx_topBoth.save();
        ctx_topBoth.fillStyle = 'rgba(1,15,75,0.1)';
        ctx_topBoth.moveTo(40, 0);
        ctx_topBoth.lineTo(turning_x, 0);
        ctx_topBoth.lineTo(topBoth_w, 40);
        ctx_topBoth.lineTo(topBoth_w, topBoth_h);
        ctx_topBoth.lineTo(0, topBoth_h);
        ctx_topBoth.lineTo(0, 40);
        ctx_topBoth.lineTo(40, 0);
        ctx_topBoth.fill();
        ctx_topBoth.restore();
        ctx_topBoth.save();
        ctx_topBoth.fillStyle = 'rgba(255,215,0,1)';
        ctx_topBoth.fillRect(topBoth_px, topBoth_py, 4, 4);
        ctx_topBoth.restore();
        if (topBoth_dx * topBoth_dy != 0) {
            topBoth_px += topBoth_dx * 2;
            topBoth_py += topBoth_dy * 2;
        } else {
            topBoth_px += topBoth_dx * steep_x;
            topBoth_py += topBoth_dy * steep_y;
        }


        if (topBoth_px >= turning_x - 4 && topBoth_py == 0) {
            topBoth_px = turning_x - 4;
            topBoth_dx = 1;
            topBoth_dy = 1;
        }
        if (topBoth_px >= topBoth_w - 4 && topBoth_py <= topBoth_h - 4) {
            topBoth_px = topBoth_w - 4;
            topBoth_dx = 0;
            topBoth_dy = 1;
        }
        if (topBoth_px == topBoth_w - 4 && topBoth_py >= topBoth_h) {
            topBoth_py = topBoth_h - 4;
            topBoth_dx = -1;
            topBoth_dy = 0;
        }
        if (topBoth_py == topBoth_h - 4 && topBoth_px <= 0) {
            topBoth_px = 0;
            topBoth_dx = 0;
            topBoth_dy = -1;
        }
        if (topBoth_py <= 40 && topBoth_py >0 && topBoth_px <=40) {
            topBoth_dx = 1;
            topBoth_dy = -1;
        }
        if (topBoth_py <= 0 && topBoth_px <=40) {
            topBoth_py = 0;
            topBoth_dx = 1;
            topBoth_dy = 0;
        }
        requestAnimationFrame(draw_topBoth);
    };
    draw_topBoth()
}